<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, this is browser ui.</title>
</head>
<body>
<h2>UI - Cross Domain - Ajax</h2>
<p>发送跨域请求，请求访问9001端口接口服务</p>

<table border="1px solid">
    <tbody>
    <tr>
        <td>演示步骤</td>
        <td>说明</td>
    </tr>
    <tr>
        <td>步骤1</td>
        <td>点击演示1按钮，请求访问9001端口hello接口服务，该接口服务没有配置CORS，因此访问被拒绝。</td>
    </tr>
    <tr>
        <td>步骤2</td>
        <td>点击方法2按钮，请求访问9001端口cors接口服务，该接口服务配置了CORS，访问成功。</td>
    </tr>
    <tr>
        <td>步骤3</td>
        <td>点击方法3按钮，发送POST请求来访问9001端口cors接口服务，该接口服务配置了CORS，访问成功</td>
    </tr>
    </tbody>
</table>

<br/>

<div>
    <div>演示1 - 通过Ajax跨域调用一个没有配置CORS的接口，调用将失败</div>
    <div>
        <button id="btn_send_ajax_error">向9001端口应用发送一个简单跨域ajax请求，被浏览器拒绝（请按F12进入浏览器调试控制台查看）</button>
    </div>
</div>

<div>
    <div>方法2 - 通过Ajax跨域调用一个配置CORS的接口，调用将成功</div>
    <div>
        <button id="btn_send_simple_ajax">向9001端口应用发送一个简单跨域ajax get请求，成功执行</button>
    </div>
</div>

<div>
    <div>方法3 - 通过Ajax跨域调用一个配置CORS的接口（POST请求），调用将成功</div>
    <div>
        <button id="btn_send_common_ajax">向9001端口应用发送一个跨域ajax post请求，成功执行</button>
    </div>
</div>

<ol>
    <li><a href="http://localhost:9001/index.html">用户服务-首页</a></li>
    <li><a href="/">Go UI Home</a></li>
</ol>
</body>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    $("#btn_send_ajax_error").click(function () {
        $.ajax({
            url: 'http://localhost:9001/api/demo/hello',
            type: "GET",
            success: function (data, status, ajax) {
                alert("跨域访问9001的hello接口成功，返回消息：" + data);
            },
            error: function () {
                alert("跨域访问9001的hello接口失败，该接口不允许跨域访问，没有进行CORS配置。");
            }
        });
    });

    $("#btn_send_simple_ajax").click(function () {
        $.ajax({
            url: 'http://localhost:9001/api/demo/cors',
            type: "GET",
            success: function (data, status, ajax) {
                alert("跨域访问9001的cors接口成功，返回消息：" + data);
            },
            error: function () {
                alert("跨域访问9001的cors接口失败，该接口不允许跨域访问，没有进行CORS配置。");
            }
        });
    });

    $("#btn_send_common_ajax").click(function () {
        $.ajax({
            url: 'http://localhost:9001/api/demo/cors',
            type: "POST",
            success: function (data, status, ajax) {
                alert("跨域访问9001的cors接口成功（POST请求），返回消息：" + data);
            },
            error: function () {
                alert("跨域访问9001的cors接口失败，该接口不允许跨域访问，没有进行CORS配置。");
            }
        });
    });

</script>
</html>